<template>
  <div class="page">
    <div class="tab_round">
      <ul>
        <li @click="mdFun(0)" :class="{current:current == 0}" >按门店</li>
        <li @click="jsFun(1)" :class="{current:current == 1}" >按技师</li>
      </ul>
    </div>
    <div v-if="current == 0">
      <div class="weui-cells weui-cells_notop">
        <template v-if="AppleAssembleList.length">
<!--          v-if="item.overTime!='0'||item.nowTime>=item.endTime||item.nowTime<=item.startTime"-->
        <div class="weui-cell" v-for="item in AppleAssembleList" :key="item.id" >
          <div class="weui-cell__hd">
            <img class="s_pic" :src="item.logoImage" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="s_name">{{item.merchantName}}</div>
            <div class="s_info">
              <div>{{item.merchantAddr}}</div>
              <div>{{item.merchantTel}}</div>

              <a  @click="goDetail(item)">立即预约</a>
            </div>
          </div>
        </div>
        </template>
        <div class="weui-cell" v-if="!AppleAssembleList.length" >
          <p style="display:flex;justify-content: center;width: 100%">没有门店</p>

        </div>
      </div>
    </div>
    <div v-if="current == 1">
      <div class="weui-cells weui-cells_notop">
        <template v-if="AppleAssembleList.length">
        <div class="weui-cell" v-for="item in AppleAssembleList" :key="item.id" v-if="item.order_visible=='1'" >
          <div class="weui-cell__hd">
            <img class="s_pic s_pic_r" :src="item.head_img_url" mode="widthFix">
          </div>
          <div class="weui-cell__bd">
            <div class="s_name">{{item.name}}</div>
            <div class="s_info">
              <div><span>门店：</span>{{item.midName}}</div>
              <div class="mt04"><span>已被预约：</span>{{item.serviceCount||0}}次</div>
              <a @click="goBookingDetail(item)">立即预约</a>
            </div>
          </div>
        </div>
        </template>
        <div class="weui-cell" v-if="!AppleAssembleList.length" >
          <p style="display:flex;justify-content: center;width: 100%">无技师可以预约</p>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'
import * as appId from "@/utils/util"
export default {
  data () {
    return {
      current: 0,
      pageNo:1,
      pageSize:10,
      result:[],
        phone:"",
      AppleAssembleList:[]
    }
  },

  components: {
    card
  },
  onPullDownRefresh(){
    console.log('down')
    if(this.result.length){
      this.pageNo++;
    }


  },
  onReachBottom () {
    wx.showNavigationBarLoading()
    console.log('pull')
    if(this.result.length){
      this.pageNo++;
    }

    // wx.stopPullDownRefresh()
  },
  onLoad(option){
    console.log(option)
    if(JSON.stringify(option)!='{}'){
      this.current=option.page;
    }

  },
  onShow(){
    wx.setNavigationBarTitle({
      title: "预约"
    })
      this.current=0;
    this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
    if(this.userInfo) {
      this.phone=this.userInfo.mobileNo;
      this. getList(0)

    }else{
      wx.showToast({
        title:'请先登录',
        icon: 'none',
        duration: 2000
      })
    }


  },
  methods: {
    goDetail(item){
      let url="/pages/bookingstore/main";
      wx.setStorageSync('appointData',JSON.stringify(item))
      wx.navigateTo({ url })
    },
    goBookingDetail(item){
      let url="/pages/booking/main";
      wx.setStorageSync('appointData',JSON.stringify(item))
      wx.navigateTo({ url })
    },
    mdFun(status){//门店
      this.current=0;
      this.pageNo=1
      this.AppleAssembleList=[];
       this. getList(status)
    },
    jsFun(status){
      console.log(status)
      this.pageNo=1
      this.current=1;
      this.AppleAssembleList=[];
      this. getList(status)

    },
    getList(status){
      let that=this;
      this.$http.request({
        method: "post",
        url: "/v1.0/appletAppoint/appletAppointList",
        body: {
          "appid":appId.appId,
          "phone":that.phone,
          "pageNo":that.pageNo,
          "pageSize":that.pageSize,
          status:status
        }
      }).then((data)=>{
        if(data.code==0){
          this.result=data.result;
          if (that.pageNo > 1) {
            that.AppleAssembleList.push(...data.result)
          }else{
            that.AppleAssembleList=data.result;
          }
          console.log( that.AppleAssembleList)
            // this.startTime=Number(time.split('至')[0].split(':')[0]);
            // this.endTIme=Number(time.split('至')[1].split(':')[0]);
            let house=new Date().getHours();

          that.AppleAssembleList.forEach((a,b)=>{
              a.startTime=Number(a.businessHours.split('至')[0].split(':')[0])
              a.endTime=Number(a.businessHours.split('至')[1].split(':')[0])
              a.nowTime=house;
          })
          if(!data.length){
            // wx.showToast({
            //   title: '',
            //   icon: 'none',
            //   duration: 2000
            // })
          }
        }else{
          wx.showToast({
            title: `${data.message}`,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.s_pic{
  width: 5.6em;
  height: 5.6em;
  border-radius: 0.3em;
  margin-right: 0.6em;
}
.s_name{
  color: #000;
  margin-bottom: 0.4em;
}
.s_info div{
  font-size: 0.8em;
  color: #333;
  line-height: 1.6em;
}
.s_info a{
  position: absolute;
  right: 0.8em;
  bottom: 1em;
  width: 6.4em;
  height: 2.2em;
  background: #FF787E;
  color: #fff;
  text-align: center;
  line-height: 2.2em;
  display: block;
  border-radius: 1.1em;
  font-size: 0.8em;
}
.s_info div span{
  color: #999;
}
.tab_round{
  background: #fff;
  padding-bottom: 0.4em;
}
.tab_round ul{
  margin: 0 20%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.tab_round ul li{
  height: 1.8em;
  line-height: 1.8em;
  border: 1px #FF787E solid;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  color: #FF787E;
  font-size: 0.9em
}
.tab_round ul li.current{
  background: #FF787E;
  color: #fff;
}
.tab_round ul li:first-child{
  border-radius: 0.9em 0px 0px 0.9em;
}
.tab_round ul li:last-child{
  border-radius: 0px 0.9em 0.9em  0px;
}
.s_pic_r{
  border-radius: 50%;
}
.mt04{
  margin-top: 0.4em;
}
</style>
